<template>
 <div id=#app>
  <Sub :list='list' @add='add'></Sub>
  <div>
     <Flag :arr='arr'></Flag>
  </div>
 </div>
</template>

<script>
import Sub from './components/SubjectItem.vue'
import Flag from './components/FlagItem.vue'
export default {
 data () {
 return {
    list:[],
    arr:[],
    a:'',
    b:''
   }
 },
created(){
    this.Getnum()
},
 components: {
  Sub,
  Flag
 },

 methods: {
     Getnum(){
        for(let i=0;i<5;i++){
            this.a=parseInt(Math.random()*100)
            this.b=parseInt(Math.random()*100)
            this.list.push({
                forword:this.a,
                back:this.b,
                sum:this.a+this.b
            })
        }
        // this.arr=this.list
    },
    add(value,index){
        if(this.list[index].sum==value){
            this.arr.push({
                content:'正确',
                class:'right',
                id:index
            })
        }else if(this.list[index].sum!==value){
            if(value==undefined){
                this.arr.push({
                content:'未完成',
                class:'undo',
                id:index
            })
            }else{
                this.arr.push({
                content:'回答错误',
                class:'error',
                id:index
            })
            }
        }
    }
 }
}
</script>

<style scoped>
body {
  background-color: #eee;
}
#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>